<template>
    <div class="card rdsp-card-view" data-page="fireHydrant">
        <div class="card-content rank-content card-content-padding alarmChange-card-content">
            <div class="rdsp-card-title">
                <div class="left-title">室外消火栓压力监测</div>
                <div class="rdsp-card-title-right">
                    <div class="right-con" style="float: left; margin-right: 6px;">
                        监测总数<span style="color: #378BF6; margin-left: 5px; font-size: 12px;" id="totzs">5</span>
                    </div>
                    <div class="right-con" style="float: left;">
                        警情<span style="color: #FE6668; margin-left: 5px; font-size: 12px;" id="totzsInfo">1</span>
                    </div>
                </div>
            </div>
            <div class="swiper-container" id="swiperMove">
                <div class="swiper-wrapper" id="showecarthy">
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination" id="fireHydrant_page"></div>
            </div>
            <div id="showSingleDetail"></div>
        </div>
    </div>
</template>

<style scoped>
    .tirInfo {
        font-size: 13px;
        color: #999999;
        margin-top: -10px;
    }

    .seInfo {
        font-size: 50px;
    }

    .yeinnerInfo {
        height: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .ywdetail {
        float: left;
        height: 100%;
        width: 42%;
    }

    .tankInfo {
        height: 100%;
        width: 46%;
        text-align: center;
        float: left;
        margin-left: 10px;
    }

    .detailInfo {
        color: #FFFFFF;
        color: #FFFFFF;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 20px;
        padding-left: 10px;
        height: 45px;
        line-height: 45px;
    }

    .watersourceInfo {
        height: 160px;
        background: rgba(244, 244, 244, 1);
        border-radius: 4px;
        margin-top: 10px;
    }

    .deteInfo {
        float: left;
        float: left;
        height: 45px;
        width: 100%;
        background: rgba(0, 0, 0, .5);
    }

    .deteInfo a {
        display: block;
    }

    .swiper-container {
        padding-bottom: 20px;
    }

    .swiper-container-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: -5px;
    }

    #fireHydrant_page {
        width: 158px;
        left: 50%;
        margin-left: -79px;
        overflow: hidden;
        white-space: nowrap;
    }
</style>

<script>
    return {},
    data: function () {
            return {}
        },
        methods: {
            getNumInfo: function () {
                $("#totzs").empty();
                $("#totzsInfo").empty();
                var id_org = "";
                if (single_Orgid == "") {
                    id_org = userInfor.organizationIds;
                } else {
                    id_org = single_Orgid;
                }
                Dao.getFcfRealTimeStatusMultiCount({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    fcfsType: 2,
                    orgIds: id_org
                }, function (data) {
                    $("#totzs").html(data.count);
                    $("#totzsInfo").html(data.fireAlarmCount);
                })

            },
            gethysourceData: function () {
                var self = this;
                var now = new Date();
                var id_org = "";
                if (single_Orgid == "") {
                    id_org = userInfor.organizationIds;
                } else {
                    id_org = single_Orgid;
                }
                Dao.getFireResMonitorInfo({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    queryType: 0,
                    resType: 2,
                    orgIds: id_org,
                    pageIndex: 0,
                    pageSize: 9
                }, function (data) {

                    if (data && data.length > 0) {
                        if (data.length < 2) {
                            $("#fireHydrant_page").hide();
                        }
                        $("#showecarthy").empty();
                        for (var i = 0; i < data.length; i++) {
                            var showDat = "0";
                            var color = "#77be07";
                            if (data[i].analogInfo.length > 0) {
                                if (data[i].analogInfo[0].realTimeAnalogInfo) {
                                    if (data[i].analogInfo[0].realTimeAnalogInfo.analogValue != null) {
                                        showDat = data[i].analogInfo[0].realTimeAnalogInfo.analogValue;
                                    }
                                }
                                if (showDat <= data[i].analogInfo[0].thresholdMin || showDat >= data[i]
                                    .analogInfo[0].thresholdMax) {
                                    color = "#fe6668"; //不正常
                                } else {
                                    color = "#77be07"; //正常
                                }
                            }
                            $("#showecarthy").append(`<div class="swiper-slide apply">
                                                <div class="watersourceInfo">
                                                   <div class="top-ban" id="fireHydrant-top-ban` + data[i].id + `">
                                                        <div class="tankInfo" id="trawFHP` + data[i].id +
                                `"></div>
                                                        <div class="ywdetail fireHydrant-ywdetail" id="hideInfoDetail` + data[i].id + `">
                                                            <div class="yeinnerInfo" >
                                                                <div class="seInfo"  style="color:` + color + `">
                                                                    ` + showDat + `<span style="font-size: 24px">Mpa</span>
                                                                </div>
                                                                <div class="tirInfo" >当前压力</div>
                                                            </div>
                                                        </div>
                                                   </div>
                                                    <div class="card-noAnalog" id="card-fireHydrant-noAnalog` + data[i]
                                .id + `">
                                                       <div class="noAnalog-left">
                                                            <img src="/ilink-app-h5-zd/static/img/rdspFile_1557407601520.png" />
                                                       </div>
                                                       <div class="noAnalog-right">
                                                            <p class="noAnalog-right-text"></p>
                                                            <span class="noAnalog-right-type">当前状态</span>
                                                       </div>
                                                    </div>
                                                <div class="deteInfo">
                                                    <a href="/eqmentMsg/` + data[i].id + `/" class="item-link item-content" data-view=".view-main"><div class="detailInfo">
                                                         ` + transFireIcon(data[i].fireTType) + data[i].name + `
                                                    </div></a>
                                                </div>
                                            </div>
                                        </div>`);
                            if (data[i].fireTType == 20) { //故障状态
                                $("#card-fireHydrant-noAnalog" + data[i].id).show();
                                $("#card-fireHydrant-top-ban" + data[i].id).hide();
                                $("#card-fireHydrant-noAnalog" + data[i].id).find(".noAnalog-right-text")
                                    .empty().html(transFireToText(data[i].fireTType)).css("color",
                                        transFireColor(data[i].fireTType));

                            } else {
                                $("#card-fireHydrant-noAnalog" + data[i].id).hide();
                                $("#card-fireHydrant-top-ban" + data[i].id).show();

                            }
                            if (data[i].analogInfo.length > 0) {
                                if (data[i].analogInfo[0].realTimeAnalogInfo) {
                                    if (data[i].analogInfo[0].realTimeAnalogInfo.analogValue != null) {

                                        self.drawClockChart(data[i].analogInfo[0].realTimeAnalogInfo
                                            .analogValue, "Mpa", data[i].analogInfo[0].thresholdMin,
                                            data[i].analogInfo[0].thresholdMax, 2, data[i].id);
                                    } else {
                                        self.drawClockChart(0, "Mpa", 0, 10, 2, data[i].id);
                                    }
                                } else {
                                    $("#hideInfoDetail" + data[i].id).empty();
                                    $("#trawFHP" + data[i].id).append(
                                        `<div><img  style="width: 283px;display:block" src="` +
                                        listNoDataPic() + `"></div>`);
                                }
                            } else {
                                $("#hideInfoDetail" + data[i].id).empty();
                                $("#trawFHP" + data[i].id).append(
                                    `<div><img  style="width: 283px;display:block" src="` +
                                    listNoDataPic() + `"></div>`);
                            }
                        }

                    } else {
                        $("#showSingleDetail").empty();
                        $("#showSingleDetail").append(
                            `<div><img  style="width: 283px;display:block; margin-top: 12px;" src="` +
                            listNoDataPic() + `"></div>`);

                        /*  self.drawClockChart(0,"Mpa",0,10,2,0); */

                    }

                }, false);
            },
            drawClockChart: function (currentAnalogValue, currentAnalogUnits, min, max, splitNumber, id) {
                var self = this;
                var _score = currentAnalogValue;
                if (id == 0) {
                    var myChart_safetyIndex = echarts.init(document.getElementById("singleInfo"));
                } else {
                    var myChart_safetyIndex = echarts.init(document.getElementById("trawFHP" + id));
                }
                var option_safetyIndex = {
                    tooltip: null,
                    grid: {
                        left: 20, //组件离容器左侧的距离,百分比字符串或整型数字
                        top: 50, //组件离容器上侧的距离，百分比字符串或整型数字
                        right: "auto", //组件离容器右侧的距离,百分比字符串或整型数字
                        bottom: 40, //组件离容器下侧的距离,百分比字符串或整型数字

                    },
                    series: [{
                        type: 'gauge',
                        min: min,
                        max: max,
                        radius: "75%",
                        center: ["45%", "50%"],
                        splitNumber: splitNumber,
                        //仪表盘标题。
                        title: {
                            show: true,
                            textStyle: {
                                fontSize: 15
                            }
                        },
                        axisLabel: { //文字样式（及“10”、“20”等文字样式）
                            distance: 5, //文字离表盘的距离
                            fontSize: 12,
                        },
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [1, '#000']
                                ],
                                shadowBlur: 2,
                                width: 8,
                                shadowColor: '#000', //默认透明
                            }
                        },
                        axisTick: { // 坐标轴小标记
                            splitNumber: 5,
                            length: 14, // 属性length控制线长
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: '#000'
                            }
                        },
                        splitLine: { //分割线样式（及10、20等长线样式）
                            length: 18,
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: '#000'
                            }
                        },
                        pointer: {
                            length: '60%',
                            width: '3',
                        },
                        detail: {
                            formatter: currentAnalogUnits,


                            textStyle: {
                                fontSize: 12
                            },
                            offsetCenter: [0, "65%"],
                        },
                        data: [{
                            value: _score,
                            name: '',
                        }]
                    }]
                };
                if (option_safetyIndex && typeof option_safetyIndex === "object") {
                    myChart_safetyIndex.setOption(option_safetyIndex, true);
                }
            }

        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                self.getNumInfo();
                self.gethysourceData();
                setTimeout(function () {
                    var mySwiper = new Swiper('#swiperMove', {
                        autoplay: false, //可选选项，自动滑动
                        pagination: {
                            el: '#fireHydrant_page',
                        },
                    });
                }, 5000);
            },
            pageAfterIn: function (e, page) {
                var self = this;
            },

        }
    }
</script>